<template>
  <div class="content">
    <div class="title">
      <h1>医院</h1>
    </div>
   <div class="level">
     <div class="level1">
       <h1>等级:</h1>
       <div>
         <span :class="{active:LevelFlag===''}" @click="changeLevel('')" >全部</span>
           <span :class="{active:LevelFlag===item.value}" v-for="(item,index) in LevelArr" :key="item.value"
                 @click="changeLevel(item.value)">{{item
               .name}}</span>

       </div>
     </div>
     <div class="level2">
       <h1>地区:</h1>
       <div>
          <span :class="{active:RegionFlag===''}"  @click="changeRegion('')">全部</span>
           <span :class="{active:RegionFlag===item.value}" v-for="(item,index) in RegionArr" :key="item.value"
                 @click="changeRegion(item.value)">{{item
               .name}}</span>

       </div>
     </div>
   </div>

  </div>
</template>

<script setup lang="ts">
import {reqLevel} from "@/api/home";
import {ref,onMounted} from "vue";
onMounted(()=>{
    getLevel('Hostype')
    getRegion('Beijin')
  })
// 定义全局事件，向父组件传输等级
let $emit =defineEmits(['transLevel','transRegion'])


let LevelArr=ref<LevelArr>([])
let RegionArr=ref<LevelArr>([])
let LevelFlag:string=ref('')
let RegionFlag:string=ref('')
const getLevel=async (dictCode:string)=>{
  let res=await reqLevel(dictCode)
  LevelArr.value=res.data
}
const getRegion=async (dictCode:string)=>{
  let res=await reqLevel(dictCode)
  RegionArr.value=res.data
}
const changeLevel=(level:string)=>{
  LevelFlag.value=level
  $emit('transLevel',LevelFlag.value)
}

const changeRegion=(Region:string)=>{
  RegionFlag.value=Region
  $emit('transRegion',RegionFlag.value)
}
</script>

<style scoped lang="scss">
 .content{
   width: 1000px;
   height: 168px;
   background: #fff;
   padding: 20px 80px 10px 0;
   .title{

     width: 100%;
     height: 41px;
     letter-spacing: 1px;
     font-weight: 700;
     color: #333;
     font-size: 16px;
   }
   .level{
     width: 920px;
     height: 87px;
     display: flex;
     flex-wrap: wrap;
     .level1{
       h1{
         margin-right: 20px;
         color: gray;
         font-size: 15px;
       }
       width: 920px;
       height: 20px;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       span{
         width: 20px;
         height: 100%;
         margin-right: 20px;
         color: gray;
         font-size: 15px;
         &.active{
           color: #4490f1;
         }
         &:hover{
           cursor: pointer;
           color: #4490f1;
         }

       }

       margin-bottom: 20px;
     }
     .level2{
       h1{

         color: gray;
         font-size: 15px;
         width: 60px;
         height: 40px;
       }
       width: 920px;
       height: 60px;
       display: flex;

       justify-content: flex-start;
       align-items: flex-start;
       span{
         display: inline-block;
         width: 10%;
         height: 50%;
         margin-bottom: 10px;
         color: gray;
         font-size: 15px;
         &.active{
           color: #4490f1;
         }
         &:hover{
           cursor: pointer;
           color: #4490f1;
         }
       }



     }

   }
 }

</style>